<template>
  <div class="rmpp" v-if="rmxq">
    <!-- 标题 -->
    <div class="sspp">
      <a class="fanhui" @click="backs"> </a>
      <span id="splbc">{{ rmxq.share.param.title }}</span>
      <span class="cdl"></span>
    </div>
    <!-- 介绍图 -->
    <div class="xqt">
      <img :src="rmxq.head_info.banner" alt="" />
      <div>
        <div v-for="(item) in rmxq.head_info.headtips" :key="item.left_image">
          <img :src="item.left_image" alt="" />
          <span>{{ item.center_text }}</span>
        </div>
      </div>
    </div>
    <!-- 头像 -->
    <div class="touxiang">
      <div class="tx">
        <img :src="rmxq.share.param.image" alt="" />
      </div>
      <div class="biaoti">
        <p>{{ rmxq.share.param.title }}</p>
        <img :src="rmxq.head_info.icontips[0].image.image" alt="" /><span></span
        ><span v-html="rmxq.head_info.icontips[0].text"></span>
      </div>
      <div class="guzn">
        <div>+关注</div>
        <span>{{ rmxq.head_info.follownum }}</span>
      </div>
    </div>
    <p class="js">{{ rmxq.head_info.description }}</p>
    <p class="rxx">{{ rmxq.data[1].module_name_for_google_utm }}</p>
    <div class="rxslist">
      <div
        :id="v.gid"
        v-for="v in rmxq.data[1].value"
        :key="v.gid"
        v-lazy-container="{
          selector: 'img',
          error: 'https://wap.epet.com/app/images/error.png',
          loading: 'https://wap.epet.com/app/images/loading.png',
        }"
      >
        <img :data-src="v.photo" alt="" />
        <p class="rxbt">{{ v.subject }}</p>
        <p class="rxjg">￥{{ v.sale_price }}</p>
      </div>
    </div>
    <p class="rxx">{{ rmxq.data[3].module_name_for_google_utm }}</p>
    <div class="rxslist">
      <div
        :id="v.gid"
        v-for="v in rmxq.data[3].value"
        :key="v.gid"
        v-lazy-container="{
          selector: 'img',
          error: 'https://wap.epet.com/app/images/error.png',
          loading: 'https://wap.epet.com/app/images/loading.png',
        }"
      >
        <img :data-src="v.photo" alt="" />
        <p class="rxbt">{{ v.subject }}</p>
        <p class="rxjg">￥{{ v.sale_price }}</p>
      </div>
    </div>
    <p class="allxd" v-if="rmxq.data[4].menus">
      <span v-if="rmxq.data[4].menus[0]">{{ rmxq.data[4].menus[0].menu_name }}</span
      ><span v-if="rmxq.data[4].menus[1]">{{ rmxq.data[4].menus[1].menu_name }}</span>
    </p>
    <!-- gspid 、 gid  、 cateid  -->
    <div class="splbs">

    <div v-for="v in rmxq.data[4].list" :key="v.gspid" >
      <div
        class="guoqis"
        v-lazy-container="{
          selector: 'img',
          error: 'https://wap.epet.com/app/images/error.png',
          loading: 'https://wap.epet.com/app/images/loading.png',
        }"
      >
        <img :data-src="v.country_photo" alt="" />
      </div>
      <div
        id="litbs"
        v-lazy-container="{
          selector: 'img',
          error: 'https://wap.epet.com/app/images/error.png',
          loading: 'https://wap.epet.com/app/images/loading.png',
        }"
      >
        <img class="litb" :data-src="v.photo" alt="" />
      </div>

      <div class="wenzi">
        <p>{{ v.subject }}</p>
        <p>
          <span class="jghong">￥{{ v.sale_price }}</span
          >&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ v.dprice }}</span>
        </p>
        <p>{{ v.comments }}{{ v.sold }}</p>
      </div>
    </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "rmpp",
  data() {
    return {
      rmxq: null,
      brandid:""
    };
  },
  methods: {
    backs() {
      this.$router.back();
      //   console.log("点击了");
    },
    async reqrm() {
      //   https://mall.api.epet.com/v3/brand/detail/main.html?brandid=82&version=355&system=wap&isWeb=1&distinct_id=17c2b39bc8d274-022dcac363853b8-17466957-230400-17c2b39bc8e91c&_=1633161525337
      let rm = await this.axios({
        url: ` https://mall.api.epet.com/v3/brand/detail/main.html?brandid=${this.brandid}&version=355&system=wap&isWeb=1&distinct_id=17c2b39bc8d274-022dcac363853b8-17466957-230400-17c2b39bc8e91c&_=1633161525337`,
      });
      this.rmxq = rm.data;
      // console.log(rm.data);
    },
  },
   created() {
        this.reqrm();
    this.brandid = this.$route.query.name;
    // console.log(this.$route.query.name);
  },
  activated() {
    this.brandid = this.$route.query.name;
    // console.log(this.$route.query.name);
  },
  watch: {
    brandid() {
      this.rmxq = null
      this.reqrm();
      // console.log(glList.data.list);
    },
  },

};
</script>

<style lang="less" scoped>
.allxd {
  font-size: 0.3rem;
  
  >span{
      display: inline-block;
      width: 2rem;
     height: .4rem;
     line-height: .4rem;
     text-align: center;
     padding: .06rem 0;
     margin-left: .2rem;
     border-radius: .1rem;
      
      background-color: rgb(224, 224, 224);
  }
   >span:nth-child(1){
       color: red;
       border:.02rem solid red;
   }
   >span:nth-child(2){
     overflow: hidden;
     position: relative;
     top: .15rem;
   }
}

.rxx {
  font-size: 0.32rem;
  padding-left: 0.2rem;
  border-bottom: 1px solid rgb(184, 184, 184);
}
.rxslist {
  font-size: 0.2rem;
  width: 100%;
  display: flex;
  margin-left: 0.2rem;
  > div {
    width: 2.14rem;
    margin-right: 0.1rem;
    line-height: 0.4rem;
    > .rxbt {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    > .rxjg {
      color: red;
    }
    > img {
      width: 1.7428rem;
    }
  }
}
.js {
  margin: 0.5rem 0;
  font-size: 0.26rem;
  line-height: 0.4rem;
  padding: 0 0.2rem;
  height: 1.2rem;
  overflow: hidden;
}
.touxiang {
  width: 100%;
  height: 1rem;
  background-color: rgb(255, 255, 255);
  padding-top: 0.3rem;
  display: flex;
  .biaoti {
    font-size: 0.26rem;
    line-height: 0.5rem;
    position: relative;
    left: 0.6rem;
    > p {
      margin: 0;
    }
  }
  .guzn {
    font-size: 0.26rem;
    position: relative;
    left: 2rem;
    // top: -0.6rem;
    line-height: 0.5rem;
    > div {
      position: relative;
      left: -0.2rem;
      padding: 0 0.2rem;
      color: red;
      border-radius: 0.06rem;
      border: 0.02rem solid red;
    }
  }
  .tx {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #fff;
    line-height: 1.8rem;
    text-align: center;
    position: relative;
    border: 0.02rem solid rgb(228, 228, 228);
    top: -0.8rem;
    left: 0.2rem;
    > img {
      width: 1.76rem;
      height: 0.736rem;
    }
  }
}
.fanhui {
  margin: 0;
  position: absolute;
  z-index: 100;
  left: 5px;
  width: 35px;
  height: 35px;
  top: 7px;
  background: url(https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png)
    0 0 no-repeat;
  background-size: 35px auto;
  background-position: 0 0;
  // background-color: rgb(255, 89, 89);
}
.rmpp {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  background-color: rgb(240, 240, 240);
}
.sspp {
  width: 100%;
  > div {
    width: 100%;
    height: 1rem;

    line-height: 1rem;
    border-bottom: 1px solid rgb(238, 233, 233);
  }
}
.xqt {
  width: 100%;
  height: 5rem;
  position: relative;
  > div {
    position: absolute;
    display: flex;
    width: 3.8rem;
    justify-content: space-around;
    bottom: 0.1rem;
    right: 0;
    font-size: 0.26rem;
    //   background-color: rgb(255, 147, 147);
    height: 0.5rem;
    line-height: 0.5rem;
    > div {
      height: 100%;
      width: 1.6rem;
      line-height: 100%;
      border-radius: 0.1rem;
      background-color: rgba(255, 255, 255, 0.904);
      //   border: 1px solid red;
      > img {
        position: relative;
        top: 0.1rem;
      }
    }
  }
  > img {
    width: 100%;
  }
}
#splbc {
  margin: 0 auto;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.36rem !important;
  position: relative;
}
.cdl {
  margin: 0;
  top: 7px;
  right: 5px;
  width: 35px;
  height: 35px;
  background: url(https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png)
    0 0 no-repeat;
  background-size: 35px auto;
  position: absolute;
  background-position: 0 -70px;
}
.splbs {
  > div {
    font-size: 0.26rem;
    position: relative;
    // line-height: 0;
    display: flex;
    border-bottom: 1px solid rgb(241, 237, 237);
    // background-color: rgb(250, 174, 174);

    > div:nth-child(1) {
      position: absolute;
      top: 0.2rem;
      left: 0.2rem;
      width: 0.5rem;
      height: 0.5rem;
      overflow: hidden;
      border-radius: 0.25rem;
      height: 0.5rem !important;
      > img {
        margin-left: -0.2rem;
        width: 1rem;
        height: 0.6rem;
      }
    }
    > div {
      line-height: 0.3rem;
      > p {
        text-align: left;
        > .jghong {
          color: rgb(255, 3, 3);
        }
      }
      > p:nth-child(2) {
        position: relative;
        top: 0.1rem;
        opacity: 0.8;
      }
      > p:nth-child(3) {
        font-size: 0.24rem;
        opacity: 0.8;
      }
    }
    #litbs {
      display: block;
      width: 2rem !important;
      height: 100%;
      text-align: center;
      // margin: 0.2rem;
      padding: 0;
    }
    .litb {
      width: 100%;
      margin: 0 auto;
    }
    .wenzi {
      width: 5rem;
      margin-left: 0.2rem;
    }
  }
}



</style>